<template>
	<view>
		<view class="user">
			<!-- #ifdef MP-WEIXIN -->
			<view class="user-imge">
				<open-data type="userAvatarUrl"></open-data>
			</view>
			<text>请填写已有账号或新注册账号</text>

			<!-- #endif -->

			<!-- #ifdef H5 || APP-PLUS -->
			<view class="user-imge">
				<image src="/images/avatar.jpg"></image>
			</view>
			<text>请填写已有账号或新注册账号</text>
			<!-- #endif -->
		</view>
		<u--form labelPosition="left" :model="Form" :rules="rules" :errorType="errorType" ref="uForm">
			<u-form-item label="邮箱" prop="email" ref="item1">
				<u--input v-model="Form.email" border="bottom" placeholder="请输入邮箱">
				</u--input>
			</u-form-item>

			<u-form-item label="密码" prop="password" ref="item1" :borderBottom="true">
				<u--input v-model="Form.password" placeholder="请输入密码" type="password" border="bottom">
				</u--input>
			</u-form-item>
		</u--form>
		<u-button type="primary" @click="submit">提交</u-button>

		<!-- 消息提示的组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>
<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		data() {
			return {
				errorType: [''],
				rules: {
					email: [{
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					}],
					password: [{
						type: 'string',
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
					}],
				},
				Form: {
					email: '',
					password: ''
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					//调用uni.login
					uni.login({
						provider: 'weixin',
						success: async (loginRes) => {
							let code = loginRes.code
							if (!code) {
								this.$refs.notice.show({
									type: 'error',
									message: '授权失败',
									icon: ture
								})
								return false
							} else {
								this.Form.code = code
							}

							let result = await this.$u.api.user.bind(this.Form)

							if (result.code === 1) {
								this.$refs.notice.show({
									type: 'success',
									message: result.msg,
									icon: true,
									complete: () => {
										uni.setStorageSync('LoginUser', result.data)
										this.$u.route({
											url: '/pages/base/index',
											type: 'switchTab'
										})
									}
								})
							} else {
								this.$refs.notice.show({
									type: 'error',
									message: result.msg,
									icon: true
								})
							}
						}
					})
				}).catch(errors => {
					this.$refs.notice.show({
						type: 'error',
						message: errors[0].message,
						icon: true
					})
				})
			}
		}
	}
</script>
<style>
	.user {
		width: 100%;
		height: 450rpx;
		background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
		padding-top: 40rpx;
	}

	.user-imge {
		width: 200rpx;
		height: 200rpx;
		background-color: greenyellow;
		border-radius: 50%;
		margin: 0 auto;
		overflow: hidden;
	}

	.user-imge image {
		width: 100%;
		height: 100%;
	}

	.user text {
		margin-top: 50rpx;
		display: block;
		text-align: center;
		color: #fff;
	}

	.u-button.data-v-3bf2dba7 {
		width: 80% !important;
		margin-top: 10px;
	}
</style>
